<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('返投项目') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true" @submit.prevent.native>
      <el-form-item :label="$t('基金名称')" prop="dealName">
        <el-input
          v-model="queryParams.dealName"
          :placeholder="$t('基金名称')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item :label="$t('剩余可投资金额占未实现返投金额比例')" prop="startProportion">
        <Ratio v-model="queryParams.startProportion" :placeholder="$t('起始比例')" clearable @keyup.enter.native="queryHandle" />
      </el-form-item>
      <el-form-item :label="$t('-')" prop="endProportion" style="margin-left: 0;">
        <Ratio v-model="queryParams.endProportion" :placeholder="$t('截至比例')" clearable @keyup.enter.native="queryHandle" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
        <el-button
          v-has-permi="['bf:base:exportReport']"
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="exportHandle"
        >{{ $t("导出") }}</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="reverseInvestmentDealList" border>
      <el-table-column :label="$t('序号')" type="index" align="center" fixed="left" show-overflow-tooltip width="50">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('基金名称')" align="center" prop="dealName" fixed="left" show-overflow-tooltip min-width="200">
        <template slot-scope="scope">
          <router-link
            target="_blank"
            :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,dealType: 'bf', gpId: scope.row.gpId, companyId: scope.row.companyId, menuKey: 'reverse_investment_deal', showType: 'deal'}}"
            class="link_a"
            @click.native="recorePath({ fromPath: $route.fullPath, path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,dealType: 'bf', gpId: scope.row.gpId, companyId: scope.row.companyId, menuKey: 'reverse_investment_deal', showType: 'deal'}})"
          >
            {{ scope.row.dealName }}
          </router-link>

        </template>
      </el-table-column>
      <el-table-column :label="$t('管理人')" align="center" prop="managerName" show-overflow-tooltip min-width="150" />
      <el-table-column :label="$t('基金阶段')" align="center" prop="fundStage" show-overflow-tooltip min-width="130" />
      <el-table-column :label="$t('我方认缴金额') + $t('金额单位')" align="center" prop="amountInvestmentEstimate" show-overflow-tooltip min-width="150">
        <template slot-scope="scope">
          <span class="money-text">{{ moneyFormat(scope.row.amountInvestmentEstimate, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('我方实缴金额') + $t('金额单位')" align="center" prop="amountInvestmentFact" show-overflow-tooltip min-width="150">
        <template slot-scope="scope">
          <span class="money-text">{{ moneyFormat(scope.row.amountInvestmentFact, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('基金认缴规模') + $t('金额单位')" align="center" prop="subscribeScale" show-overflow-tooltip min-width="150">
        <template slot-scope="scope">
          <span class="money-text">{{ moneyFormat(scope.row.subscribeScale, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('基金实缴规模') + $t('金额单位')" align="center" prop="paidInScale" show-overflow-tooltip min-width="150">
        <template slot-scope="scope">
          <span class="money-text">{{ moneyFormat(scope.row.paidInScale, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('在投金额') + $t('金额单位')" align="center" prop="investmentAmount" show-overflow-tooltip min-width="120">
        <template slot-scope="scope">
          <span class="money-text">{{ moneyFormat(scope.row.investmentAmount, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('剩余可投资金额') + $t('金额单位')" align="center" prop="remainingInvestableAmount" show-overflow-tooltip min-width="150">
        <template slot-scope="scope">
          <span class="money-text">{{ moneyFormat(scope.row.remainingInvestableAmount, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('目标返投金额') + $t('金额单位')" align="center" prop="targetReverseInvestmentAmount" show-overflow-tooltip min-width="150">
        <template slot-scope="scope">
          <span class="money-text">{{ moneyFormat(scope.row.targetReverseInvestmentAmount, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('已实现返投金额') + $t('金额单位')" align="center" prop="realizedReverseInvestmentAmount" show-overflow-tooltip min-width="150">
        <template slot-scope="scope">
          <span class="money-text">{{ moneyFormat(scope.row.realizedReverseInvestmentAmount, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('未实现返投金额') + $t('金额单位')" align="center" prop="unrealizedReverseInvestmentAmount" show-overflow-tooltip min-width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.unrealizedReverseInvestmentAmount > 0" class="money-text">{{ moneyFormat(scope.row.unrealizedReverseInvestmentAmount, 'w') }}</span>
          <span v-else class="money-text">0</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('剩余可投资金额占未实现返投金额比例(%)')" align="center" prop="investableAmountProportion" show-overflow-tooltip min-width="280">
        <template slot-scope="scope">
          <span class="money-text">{{ moneyFormat(scope.row.investableAmountProportion) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

  </div>
</template>

<script>
import { findReverseInvestmentDealList } from '@/api/bf/base/bfBase'

export default {
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 返投报表表格数据
      reverseInvestmentDealList: [],
      // 是否显示弹出层
      formOpen: false,
      // 查询参数
      queryParams: {
        dealName: undefined,
        startProportion: undefined,
        endProportion: undefined,
        pageNum: 1,
        pageSize: 10
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询返投报表 */
    getList() {
      this.loading = true
      findReverseInvestmentDealList(this.queryParams).then(response => {
        this.reverseInvestmentDealList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 表单重置
    reset() {
      this.form = {
        dealId: undefined,
        dealName: undefined,
        managerName: undefined,
        fundStage: undefined,
        amountInvestmentEstimate: undefined,
        amountInvestmentFact: undefined,
        subscribeScale: undefined,
        paidInScale: undefined,
        investmentAmount: undefined,
        remainingInvestableAmount: undefined,
        targetReverseInvestmentAmount: undefined,
        realizedReverseInvestmentAmount: undefined,
        unrealizedReverseInvestmentAmount: undefined,
        investableAmountProportion: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    },
    exportHandle() {
      var query = {
        dealName: this.queryParams.dealName,
        startProportion: this.queryParams.startProportion,
        endProportion: this.queryParams.endProportion
      }
      this.downLoadExcel('/bf/bfBase/reverseExport', query)
    }

  }
}
</script>
